<template>
    <div class="page-content">
        <h3>领取记录</h3>
        <el-row :gutter="20">
            <el-form :model="searchForm" style="display: flex; align-items: center;">
                <el-form-item style="margin-right: 20px;">
                    <el-input placeholder="请输入活动名称" v-model="searchForm.activityName" @blur="getData"
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="领取时间：" style="margin-right: 0;">
                    <el-date-picker label="创建时间：" v-model="datavalue" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" @change="timeChange" />
                </el-form-item>
            </el-form>
        </el-row>

        <art-table :data="tableData" :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
            :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
            <template #default>
                <el-table-column label="用户信息" prop="avatar" #default="scope">
                    <div class="user" style="display: flex; align-items: center">
                        <img :src="scope.row.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%"
                            v-if="scope.row.avatar" />
                        <div>
                            <p class="user-name">{{ scope.row.nickName }}</p>
                            <p class="email">ID:{{ scope.row.userId }}</p>
                        </div>
                    </div>
                </el-table-column>
                <!-- <el-table-column label="活动内容" prop="activityContentAoList" align="center">
                    <template #default="scope">
                        <div class="checkMore" v-if="scope.row.activityContentAoList.length"
                            @click="openVipDialogVisible(scope.row.activityContentAoList)">
                            查看更多
                        </div>
                    </template>
</el-table-column> -->
                <el-table-column label="活动赠送" prop="activityContentAoList" align="center">
                    <template #default="scope">
                        <span
                            v-if="scope.row.activityContentAoList[0].activityCommodityAoList && scope.row.activityContentAoList[0].activityCommodityAoList.length">
                            <span>
                                <template
                                    v-for="(item, idx) in scope.row.activityContentAoList[0].activityCommodityAoList"
                                    :key="item.id">
                                    <span>{{ item.name }}</span>
                                    <span
                                        v-if="idx < scope.row.activityContentAoList[0].activityCommodityAoList.length - 1">,
                                    </span>
                                </template>
                            </span>
                        </span>
                        <span v-else>无</span>
                    </template>
                </el-table-column>
                <el-table-column #default="scope" label="领取数量" prop="receiveCount" align="center">
                    {{ `×${scope.row.receiveCount}` }}
                </el-table-column>
                <el-table-column label="状态" prop="giftStatus" align="center">
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.giftStatus)">
                            {{ buildTagText(scope.row.giftStatus) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center" />
                <el-table-column label="领取时间" prop="receiveTime" align="center">
                    <template #default="scope">
                        {{ formatDate(scope.row.receiveTime) }}
                    </template>
                </el-table-column>
            </template>
        </art-table>
        <el-dialog v-model="vipDialogVisible" title="商品信息" width="50%" :close-on-click-modal="false">
            <art-table :data="openVipData">
                <template #default>
                    <el-table-column label="商品图片" prop="image" align="center">
                        <template #default="scope">
                            <img :src="scope.row.image" alt="" style="width: 100px;height: 100px;"
                                v-if="scope.row.image">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" prop="name" sortable align="center" />
                    <el-table-column label="商品价格" prop="price" sortable align="center" />
                </template>
            </art-table>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getActiveRecord } from '@/api/marketing'
import { useRoute } from 'vue-router'
const route = useRoute()

const searchForm = reactive({
    activityName: '',
    startTime: '',
    endTime: ''
})
const datavalue = ref('')
const tableData = ref([])
const timeChange = (e: any) => {
    searchForm.startTime = formatDate(e[0])
    searchForm.endTime = formatDate(e[1])
    getData()
}
const getTagType = (status: number) => {
    switch (status) {
        case 0:
            return 'info'
        case 1:
            return 'success'
        case 2:
            return 'warning'
    }
}

const buildTagText = (status: number) => {
    let text = ''
    if (status === 0) {
        text = '待发放'
    } else if (status === 1) {
        text = '已发放'
    } else {
        text = '发放失败'
    }
    return text
}
const formatDate = (date: string) => {
    return new Date(date)
        .toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        })
        .replace(/\//g, '-')
}

const currentChange = (val: number) => {
    pageNum.value = val
    getData()
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
}

const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)

const filterEmptyValues = (obj: any) => {
    const result: any = {}
    for (const key in obj) {
        if (obj[key] !== '' && obj[key] !== null && obj[key] !== undefined) {
            result[key] = obj[key]
        }
    }
    return result
}

const getData = async () => {
    tableLoading.value = true
    try {
        const params = filterEmptyValues(searchForm)
        const res = await getActiveRecord({
            pageSize: pageSize.value,
            pageNum: pageNum.value,
            activityId: route.query.id,
            userType: '01',
            ...params
        })
        if (res.code === '00000') {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        }
    } catch { } finally {
        tableLoading.value = false
    }
}

const vipDialogVisible = ref(false)
const openVipData = ref([])
const openVipDialogVisible = (row: any) => {
    console.log(row, "row===");

    vipDialogVisible.value = true
    openVipData.value = row.activityCommodityAoList
}
onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped>
.page-content {
    .svg-icon {
        width: 1.8em;
        height: 1.8em;
        overflow: hidden;
        vertical-align: -8px;
        fill: currentcolor;
    }

    h3 {
        font-weight: bold;
        margin-bottom: 20px;
    }

    .user {
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 6px;
        }

        >div {
            margin-left: 10px;

            .user-name {
                font-weight: 500;
                color: var(--art-text-gray-800);
            }
        }
    }
}

.checkMore {
    font-size: 12px;
    color: #67c23a;
    cursor: pointer;
}

:deep(.el-row) {
    justify-content: space-between;
}
</style>